<div class="row mt-4">
  <div class="col-md-8">
    <form
      [formGroup]="passwordForm"
      (ngSubmit)="onPasswordChange(userDetails.id)"
      class="d-block"
    >
      <span
        *ngIf="!isChangePasswordPressed"
        class="mt-3 change mb-3"
        (click)="changePassword()"
        ><strong class="reviewlink">Change Password</strong></span
      >
      <div *ngIf="isChangePasswordPressed">
        <div class="form-group">
          <input
            type="password"
            class="form-control"
            name="password"
            formControlName="password"
            placeholder="Choose Password"
            autocomplete="off"
          />
        </div>
        <div
          *ngIf="
            passwordForm.get('password').errors &&
            passwordForm.get('password').touched
          "
        >
          <p class="login-error-message text-danger">
            {{
              passwordForm.get('password').errors.msg ||
                'Password must be at least 6 characters!'
            }}
          </p>
        </div>
        <div class="form-group">
          <input
            type="password"
            class="form-control"
            name="password_confirmation"
            formControlName="password_confirmation"
            placeholder="Confirm Password"
            autocomplete="off"
          />
        </div>
        <div
          *ngIf="
            (passwordForm.get('password_confirmation').errors ||
              passwordForm.hasError('mismatchedPasswords')) &&
            passwordForm.get('password_confirmation').touched
          "
        >
          <p class="login-error-message text-danger">This can't be blank!</p>
        </div>
        <div>
          <p
            class="login-error-message text-danger"
            *ngIf="passwordForm.errors?.doesMatchPassword"
          >
            Password must match
          </p>
        </div>
        <div class="form-group">
          <button
            type="submit"
            class="btn themebtnprimarybasic"
            [disabled]="!passwordForm.valid"
          >
            Change Password
          </button>
          <button
            *ngIf="isChangePasswordPressed"
            class="btn themebtnprimarybasic ml-2"
            (click)="cancelPressed()"
          >
            Cancel
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
